<template>
    <div class="main el-mg-20">
        <!-- 表格过滤 -->
        <el-form
            :inline="true"
            :size="$formSize"
            class="table-filter el-box-init el-bkgd-white"
        >
            <el-form-item label="关键词" class="el-mg-r-30">
                <el-input
                    v-model="search.keywor"
                    clearable
                    placeholder="请输入分类名"
                />
            </el-form-item>

            <el-form-item>
                <el-button
                    type="success"
                    round
                    icon="el-icon-search"
                    @click="onSearch"
                >
                    查询
                </el-button>
                <el-button
                    type="warning"
                    round
                    icon="el-icon-refresh"
                    @click="onReset"
                >
                    重置
                </el-button>
            </el-form-item>
        </el-form>

        <div class="table-wrap el-box-init el-bkgd-white">
            <!-- 操作按钮 -->
            <el-row class="table-btn el-pd-b-20">
                <el-button
                    type="primary"
                    icon="el-icon-plus"
                    :size="$btnSize"
                    v-if="isAuth('BLOG_CLASSIFY_ADD')"
                    @click="onAddOrUpdate()"
                >
                    新增
                </el-button>
                <el-button
                    type="warning"
                    :size="$btnSize"
                    v-if="isAuth('BLOG_CLASSIFY_SORT')"
                    @click="onUpdateSort()"
                >
                    更新排序
                </el-button>
                <el-button
                    type="danger"
                    icon="el-icon-delete"
                    :size="$btnSize"
                    v-if="allDelBtnVisible && isAuth('BLOG_CLASSIFY_DEL')"
                    @click="onDel()"
                >
                    批量删除
                </el-button>
            </el-row>

            <el-table
                v-loading="table.loading"
                :data="table.list"
                :size="$tableSize"
                stripe
                border
                ref="tableRef"
                @selection-change="handleSelectionChange"
                :row-key="getRowKeys"
            >
                <el-table-column type="selection" width="40"></el-table-column>

                <el-table-column
                    prop="title"
                    label="分类名"
                    width="180"
                ></el-table-column>

                <el-table-column prop="desc" label="描述"></el-table-column>

                <el-table-column
                    prop="support"
                    label="是否推荐"
                    width="80"
                    align="center"
                >
                    <template slot-scope="{ row }">
                        <el-tag
                            :type="row.support == 1 ? 'primary' : 'warning'"
                        >
                            {{ row.support == 1 ? "是" : "否" }}
                        </el-tag>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="issuer_name"
                    label="创建人"
                    width="100"
                    align="center"
                ></el-table-column>

                <el-table-column
                    prop="created_time"
                    label="创建时间"
                    width="180"
                >
                    <template slot-scope="{ row }">
                        {{ row.created_time | formatTime }}
                    </template>
                </el-table-column>

                <el-table-column
                    label="操作"
                    :width="$defaultActionWidth"
                    align="center"
                >
                    <template slot-scope="{ row }">
                        <!-- 编辑 -->
                        <el-button
                            size="mini"
                            type="primary"
                            v-if="isAuth('BLOG_CLASSIFY_UPDATE')"
                            @click="onAddOrUpdate(row.id)"
                        >
                            <i class="el-icon-edit el-mg-r-5"></i>
                            编辑
                        </el-button>

                        <!-- 删除 -->
                        <el-button
                            size="mini"
                            type="danger"
                            v-if="isAuth('BLOG_CLASSIFY_DEL')"
                            @click="onDel(row.id)"
                        >
                            <i class="el-icon-delete el-mg-r-5"></i>
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 表格分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="table.currentPage"
                :page-sizes="table.pageSizes"
                :page-size="table.pageSize"
                :layout="table.layout"
                :total="table.total"
                background
            >
            </el-pagination>
        </div>

        <dialog-add-or-update ref="addOrUpdate" :id="table.rowId" />
    </div>
</template>

<script>
import DialogAddOrUpdate from "./add-or-update.vue";
import { tableMethodsMixins } from "@/global/utils/mixins";
import { adminClassify as Api } from "api";

export default {
    mixins: [tableMethodsMixins],
    components: {
        DialogAddOrUpdate,
    },
    data() {
        return {
            allDelBtnVisible: false, // 表格全选

            search: {
                keywor: "",
            },

            //表格
            table: {
                loading: false,
                rowId: 0,
                list: [],
                currentPage: this.$config.pagination.currentPage, // 默认页
                pageSize: this.$config.pagination.pageSize, // 每页多少条
                pageSizes: this.$config.pagination.pageSizes, // 每页显示个数下拉选择器的选项设置
                layout: this.$config.pagination.layout, // 组件布局，子组件名用逗号分隔
                total: 0, // 总条数
            },

            // 回显选择过的列
            getRowKeys(row) {
                return row.id;
            },
        };
    },
    created() {
        this.getList().then(() => {
            this.rowDrop(); // 初始化列表后执行拖拽方法
        });
    },
    methods: {
        /* 获取列表 */
        async getList() {
            const { code, data } = await this.$axios.get(Api.getList, {
                params: {
                    keywor: this.search.keywor,
                    page: this.table.currentPage, //查询第几页
                    per_page: this.table.pageSize, //每页多少条数据
                },
            });

            if (code === 200) {
                this.table.list = data.list;
                this.table.total = data.total;

                // 关闭加载提示
                this.table.loading = false;
            }
        },

        /* 查询 */
        onSearch() {
            this.table.loading = true;

            this._initTableSelectionIds();
        },
        /* 重置 */
        onReset() {
            this.search.keywor = "";
        },

        /* 新增、编辑 */
        onAddOrUpdate(id) {
            this.table.rowId = id;
            this.$refs.addOrUpdate.visible = true; // 弹窗开关
        },

        /* 删除 */
        async onDel(id) {
            if (!id) id = this.table.selectIds.map((item) => item.id).join(",");

            // 确认删除
            const confirm = await this.$msgBox.confirm({
                cancel: true,
            });

            if (confirm) {
                const { code, msg, data } = await this.$axios.delete(Api.del, {
                    data: { id },
                });

                if (code === 200) {
                    this.$msg.success(msg);
                    this.getList();
                } else {
                    this.$msg.error(msg ? msg : data);
                }
            }
        },

        /* 排序 */
        async onUpdateSort() {
            const sortList = this.table.list.map((item, index) => ({
                id: item.id,
                sort:
                    index + (this.table.currentPage - 1) * this.table.pageSize,
            }));

            const { code, msg, data } = await this.$axios.post(
                Api.onUpdateSort,
                {
                    sortList: JSON.stringify(sortList),
                }
            );

            if (code == 200) {
                this.$msg.success(msg);

                // 初始化清除表格选中、刷新
                this._initTableSelectionIds();
            } else {
                this.$msg.error(msg ? msg : data);
            }
        },
        /**
         * 表格全选
         */
        handleSelectionChange(rows) {
            this.table.selectIds = rows;

            this.allDelBtnVisible = this.table.selectIds.length ? true : false;
        },
        /* 每页多少条 */
        handleSizeChange(val) {
            this.table.loading = true;
            this.table.pageSize = val;
            this.getList();
        },
        /* 当前页  */
        handleCurrentChange(val) {
            this.table.loading = true;
            this.table.currentPage = val;
            this.getList();
        },
        /**
         * 初始化清除表格选中、全选数组、表格刷新
         */
        _initTableSelectionIds() {
            this.$refs.tableRef.clearSelection(); // 清除表格选择
            this.table.selectIds = []; // 清除表格全选
            this.getList();
        },
    },
};
</script>